<template>
  <div class="box">
    <aside-box>
      <template #zh> 进度图 </template>
      <template #en> progress chart </template>
      <div class="progress" ref="progressRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import * as echarts from "echarts";
const option = {
  grid: {
    top: "10",
    left: "2%",
    right: "5%",
    bottom: "0",
    containLabel: true,
  },
  yAxis: [
    {
      type: "category",
      data: ["textone", "textwo", "texthree", "textfour"],
      inverse: true,
      axisTick: { show: false },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,255)",
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      axisLine: {
        show: false,
      },
    },
  ],
  xAxis: [
    {
      type: "value",
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      type: "bar",
      barWidth: 10,
      data: [100, 80, 70, 60],
      label: {
        normal: {
          show: true,
          position: "insideBottomRight",
          formatter: "{c}%",
          distance: 0,
          offset: [10, -15],
          color: "#fff",
          fontSize: 12,
          padding: [2, 5, 2, 5],
          backgroundColor: {
            image:
              "",
          },
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 0,
                color: "#57eabf", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2563f9", // 100% 处的颜色
              },
            ],
            false
          ),
          barBorderRadius: 14,
        },
      },
    },
    {
      type: "bar",
      barWidth: 10,
      xAxisIndex: 0,
      barGap: "-100%",
      data: [100, 100, 100, 100],
      itemStyle: {
        normal: {
          color: "#444a58",
          barBorderRadius: 14,
        },
      },
      zlevel: -1,
    },
  ],
};

const [progressRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .progress {
    width: 100%;
    height: 200px;
  }
}
</style>